From 75a612ae635bcc848f3f0183db543a94a851a2a3 Mon Sep 17 00:00:00 2001 From: =?utf8?q?Marko=20M=C3=A4kel=C3=A4?= Date: Sun, 29 Jun 2025 22:55:41 +0300 Subject: [PATCH] luci-theme-bootstrap: global darkmode graphs MIME-Version: 1.0 Content-Type: text/plain; charset=utf8 Content-Transfer-Encoding: 8bit Instead of enumerating each SVG graph that the dark mode is applicable to, apply --background-color-high to each SVG element that is a child of
and --text-color-highest to each LINE inside such SVG. This allows dark mode to work in all SVG widgets by default, in any current or future LuCI component. Signed-off-by: Marko Mäkelä --- .../htdocs/luci-static/bootstrap/cascade.css | 14 +++----------- 1 file changed, 3 insertions(+), 11 deletions(-) diff --git a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css index 9e47e521e2..ecc5f25032 100644 --- a/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css +++ b/themes/luci-theme-bootstrap/htdocs/luci-static/bootstrap/cascade.css @@ -2613,18 +2613,10 @@ div.cbi-value var.cbi-tooltip-container, max-width: none; } -[data-darkmode="true"] [data-page="admin-status-channel_analysis"] #view> div > div > div > div > div[style], -[data-darkmode="true"] [data-page="admin-status-realtime-load"] #view > div > div > div[style], -[data-darkmode="true"] [data-page="admin-status-realtime-bandwidth"] #view > div > div > div > div[style], -[data-darkmode="true"] [data-page="admin-status-realtime-wireless"] #view > div > div > div > div[style], -[data-darkmode="true"] [data-page="admin-status-realtime-connections"] #view > div > div > div[style] { +#view div[style] > svg { background-color: var(--background-color-high)!important; } -[data-darkmode="true"] [data-page="admin-status-channel_analysis"] #view> div > div > div > div > div > svg > line[style], -[data-darkmode="true"] [data-page="admin-status-realtime-load"] #view > div > div > div > svg > line[style], -[data-darkmode="true"] [data-page="admin-status-realtime-bandwidth"] #view > div > div > div > div > svg > line[style], -[data-darkmode="true"] [data-page="admin-status-realtime-wireless"] #view > div > div > div > div > svg > line[style], -[data-darkmode="true"] [data-page="admin-status-realtime-connections"] #view > div > div > div > svg > line[style] { - stroke: #fff!important; +#view div[style] > svg line[style] { + stroke: var(--text-color-highest)!important; } -- 2.30.2